﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqGridDemo.aspx.cs" Inherits="MyWebApplication.JqGridDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JqGrid Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="Scripts/jqGrid/css/jquery-ui-1.10.4.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="Scripts/jqGrid/css/ui.jqgrid.css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script src="Scripts/jqGrid/js/grid.locale-cn.js" type="text/javascript"></script>
    <script src="Scripts/jqGrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>
    <script src="Scripts/jqGrid/js/frozenUtils.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            jQuery("#gridList").jqGrid({
                url: 'JqGridAjax.aspx',
                datatype: "json",
                multiselect: true,
                colNames: ['操作', '商品编号', '商品名称', '成本价', '会员价', '商品图片', '商品编号', '商品名称', '成本价', '会员价'],
                colModel: [
                    { name: 'ID', index: 'ID', frozen: true, hidden: false, search: false, sortable: false, width: 50, formatter: formatEdit,align:"center" },
                    { name: 'ProductCode', index: 'ProductCode', width: 200, frozen: true, searchoptions: { sopt: ['cn']} },
                    { name: 'ProductName', index: 'ProductName', width: 275, frozen: true, searchoptions: { sopt: ['cn']} },
                    { name: 'CostPrice', index: 'CostPrice', width: 150, formatter: 'number', sorttype: 'number', align: 'right', search: true },
                    { name: 'VipPrice', index: 'VipPrice', width: 150, formatter: 'number', sorttype: 'number', align: 'right', search: false },
                    { name: 'ImageUrl', index: 'ImageUrl', width: 150, formatter: formatImage, sortable: false, align: 'center', search: false },
                    { name: 'ProductCode', index: 'ProductCode', width: 200, searchoptions: { sopt: ['cn']} },
                    { name: 'ProductName', index: 'ProductName', width: 275, searchoptions: { sopt: ['cn']} },
                    { name: 'CostPrice', index: 'CostPrice', width: 150, formatter: 'number', sorttype: 'number', align: 'right', search: false },
                    { name: 'VipPrice', index: 'VipPrice', width: 150, formatter: 'number', sorttype: 'number', align: 'right', search: false}],
                rowNum: 10,
                rownumbers: true,
                rownumWidth: 50,
                width: 1000,
                rowList: [10, 30, 50, 100, 1000],
                pager: '#listPager',
                sortname: 'ID',
                viewrecords: true,
                sortorder: "desc",
                prmNames: { page: "pageIndex", rows: "records", sort: "orderBy", order: "sord" },
                jsonReader: {
                    repeatitems: false,
                    root: "Rows",
                    total: "Records",
                    records: "Total"
                },
                loadComplete: function () {
                    var searchInfo = JSON.stringify($("#gridList").jqGrid("getGridParam", "postData"));
                    console.log(searchInfo);
                    hackHeight("gridList");
                },
                shrinkToFit: false,
                //caption: "商品列表",
                height: 'auto'
            });
            jQuery("#gridList").jqGrid('setFrozenColumns');
            jQuery("#gridList").jqGrid('filterToolbar', { searchOperators: true });
        });

        //获取选中行Id
        function getSelectRowIds() {
            var selectRowIds = jQuery("#gridList").jqGrid('getGridParam', 'selarrrow');
            console.log(selectRowIds);
        }

        //获取选中行对象
        function getSelectRows() {
            var selectRowIds = jQuery("#gridList").jqGrid('getGridParam', 'selarrrow');
            for (var i = 0; i < selectRowIds.length; i++) {
                var rowObj = jQuery("#gridList").jqGrid('getRowData', selectRowIds[i]);
                console.log(rowObj);
            }
        }

        /**
        **格式化图片
        **
        **cellvalue:单元格值
        **options:表格设置
        **rowObject:行对象
        **/
        function formatImage(cellvalue, options, rowObject) {
            var html = "";
            if (cellvalue != undefined) {
                html += "<img alt=\"\" src=\"" + cellvalue + "\" height=\"50\"/>";
            }
            return html;
        }

        function formatEdit(cellvalue, options, rowObject) {
            var html = "";
            if (cellvalue != undefined) {
                html += "<input alt=\"\" value=\"编辑\" type=\"button\" onclick=\"console.log(" + cellvalue + ")\" />";
            }
            return html;
        }
        
        
    </script>
</head>
<body>
    <input type="button" value="get select row Ids" onclick="getSelectRowIds();" />
    <input type="button" value="get select rows Obj" onclick="getSelectRows();" />
    <table id="gridList">
    </table>
    <div id="listPager">
    </div>
</body>
</html>
